<template>
	<view>
		<u-sticky offset-top="0">
			<view class="search">
				<view class="searchInput">
					<u-icon name="search" color="#909399" :size="26"></u-icon>
					<u--input type="text" border="none" @input="inputKey" :value="tabname" placeholder="请输入搜索关键值" clearable @focus="isShow = true"></u--input>
				</view>
				<u-transition :show="isShow" mode="fade-right">
					<view class="buttom" @click="search()">
						<text>搜索</text>
					</view>
				</u-transition>
			</view>
		</u-sticky>
		
		<view class="hot">
			<label>热门搜索:</label>
			<u-button type="error" :plain="true" shape="circle" @click="inputKey('奶粉')">奶粉</u-button>
			<u-button type="error" :plain="true" shape="circle" @click="inputKey('面霜')">面霜</u-button>
			<u-button type="error" :plain="true" shape="circle" @click="inputKey('图书')">图书</u-button>
		</view>
		
		<view class="record" v-if="getList.length > 0">
			<view class="r-header">历史搜索</view>
			<scroll-view scroll-y scroll-with-animation style="height: 100px;">
				<view class="r-ul">
					<view class="r-li" v-for="item in getList" :key="item">
						<u-button type="default" :plain="true"  shape="circle" @click="inputKey(item)">{{item}}</u-button>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<good-list :list="goods" class="zj"></good-list>
		
		<view v-if="show" class="img">
			<image src="../../static/mescroll-empty.png"  mode="widthFix"></image>
		</view>
		
		<u-loadmore :status="status"></u-loadmore>
	</view>
</template>

<script>
	import{apiGoodDamn} from '../../api/mock'
	import {mapActions,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				isShow:false,
				goods:[],
				num:6, //每页条数
				p:1, //当前页码
				tabname:'',
				status:'loadmore',
				show : false
			}
		},
		onLoad() {
			//当页面加载完成后，请求各类数据
			//bug：由于请求返回需要1秒。为了顺利获取数据设置定时器2秒后在执行该函数
			setTimeout(()=>{
				this.getGoods()
			},1100)
		},
		onShow() {
			this.isShow = false;
		},
		onReachBottom() {
			let msg = this.tabname;
			if(this.tabname.trim() == ''){
				msg = '全部';
			}
			this.show = false;
			this.status='loading';
			this.p++; //每次触底页码自增
			//根据最近一次的选项卡改变事件中，获取的选项卡下标，提取出来名称
			//获取触底后的页码对应的数据
			apiGoodDamn(this.p, this.num, msg).then((res)=>{
				this.status='loadmore';
				this.goods = [...this.goods,...res.list];
				console.log(this.goods);
			if(this.goods.length == res.total){
				this.status = 'nomore';
			}
			}).catch((err)=>{
				console.log(err);
			})
		},
		computed:{
			...mapGetters(['getList'])
		},
		methods: {
			...mapActions(['addKeyWord']),
			search(){
				this.getGoods();
				this.addKeyWord(this.tabname);
			},
			inputKey(e){
				this.tabname = e;
				this.getGoods();
			},
			getGoods(){
				let msg = this.tabname;
				if(this.tabname.trim() == ''){
					msg = '全部';
				}
				this.status='loading';
				this.goods=[];
				this.p =1;
				this.show = false;
				apiGoodDamn(this.p, this.num, msg).then((res)=>{
					this.goods = res.list;
					console.log(this.goods);
					if(this.goods==''){
						this.show = true;
						this.status = 'nomore';
					}
				if(this.goods.length == res.total){
					this.status = 'nomore';
				}
				}).catch((err)=>{
					console.log(err);
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.search {
	padding: 10px;
		width: 100%;
		display: flex;
		height: 35px;
		line-height: 35px;
		background-color: white;
		.searchInput {
			display: flex;
			padding: 7px;
			width: 100%;
			background-color: #f2f2f2;
			border-radius: 20px;

			.searchInput input{
				width: 100%;
			}
			
		}
		.buttom{
			height: 100%;
			width: 60px;
			text-align: center;
		}
	}
	
	.hot{
		display: flex;
		margin-top: 10px;
		align-items: center;
		margin-left: 10px;

		button{
			width: 70px;
			height: 30px;
		}
	}
	
	.record{
		width: 100%;
		margin-top: 10px;
		margin-bottom: 20px;
		.r-header{
			font-weight: bold;
			text-align: center;
		}
		.r-ul{
			width: 100%;
			display: flex;
			overflow: hidden;
			flex-wrap: wrap;
			.r-li{
				padding: 5px;
			}
			.r-li button{
				padding: 16px;
				text-overflow: ellipsis;
				overflow: hidden;
				color: red;
				white-space: nowrap;
				border-radius: 50rpx;
				border: 1px solid red;
			}
		}
	}
	.img{
		display: flex;
		justify-content: center;
	}
</style>
